<template>
	<view>
		<view class="cu-list menu" :class="['card-menu margin-top']" v-for="(item, index) in payment" :key="index"
			@click="checkAddress(item)">
			<view class="cu-item  ">
				<view class="content">

					<image src="../../static/zfb.png" class="png" mode="aspectFit" v-if="item.type==1"></image>
					<image src="../../static/wx.png" class="png" mode="aspectFit" v-if="item.type==2"></image>
					<image src="../../static/yh.png" class="png" mode="aspectFit" v-if="item.type==3"></image>
					<text class="text-grey">{{item.type_text}}</text>
				</view>
			</view>

			<view class="flex cu-item ">
				<view class="flex-treble " v-if="item.type <= 5">
					<view class="cu-item text-left">
						<text class="text-df nowrap" style="margin-left: 9px;">{{i18n.address2.account}}</text>
						<view style="margin-left: 9px;">
							<!-- <view class="text-content">{{item.address}}</view> -->
							<view class="text-lg row" style="word-break: break-word;">{{item.address}}</view>
						</view>
					</view>
				</view>
				<view class="flex-treble " v-else>
					<view class="cu-item text-left">
						<text class="text-df nowrap" style="margin-left: 9px;">{{i18n.address2.bank}}</text>
						<view style="margin-left: 9px;">
							<!-- <view class="text-content">{{item.address}}</view> -->
							<view class="text-lg row" style="word-break: break-word;">{{item.bank}}{{item.bank_card_no}}
							</view>
							<view class="text-lg row" style="word-break: break-word;">{{item.username}}</view>
						</view>
					</view>
				</view>
				<view class="flex-sub ">
					<view class="cu-item text-right">
						<view style="line-height: 5;">
							<button class="cu-btn sm bg-yellow round" @tap="selectAddress('select', item)"
								data-target="bottomModal">{{i18n.cash.select}}</button>
						</view>
					</view>
				</view>
				<view class="flex-sub ">
					<view class="cu-item text-right">
						<view style="line-height: 5;">
							<button class="cu-btn sm bg-yellow round" @tap="addAddress('edit', item)"
								data-target="bottomModal">{{i18n.address2.edit}}</button>
						</view>
					</view>
				</view>
				<view class="flex-sub ">
					<view class="cu-item text-right">
						<view style="line-height: 5;">
							<button class="cu-btn sm bg-yellow round" @tap="delAddress(item)"
								data-target="bottomModal">{{i18n.address2.del}}</button>
						</view>
					</view>
				</view>
				<!-- <view class="flex-twice ">2</view> -->

			</view>

		</view>
		<view class="padding flex flex-direction add-btn">
			<button class="cu-btn bg-yellow lg" @click="addAddress('add')">{{i18n.address2.add}}</button>
		</view>
		<!-- <empty v-if="payment.length == 0"></empty> -->
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import empty from '@/components/empty.vue'
	export default {
		components: {
			empty
		},
		data() {
			return {
				source: 0,
				addressList: [],
				option: {},
			}
		},
		onLoad(option) {
			uni.setNavigationBarTitle({
				title: this.i18n.address2.title
			});
			this.source = option.source;
			this.option = option
			this.getUserPayment()
		},
		computed: {
			...mapState({
				payment: state => state.user.payment
			}),
			i18n() {
				return this.$t('message');
			}
		},
		methods: {
			...mapActions(['getUserPayment']),
			checkAddress(item) {

				// if (this.source == 1) {
				// 	this.option.address_id = item.id
				// 	uni.navigateTo({
				// 		url: '/pages/order/createOrder?' + this.$tools.queryStringify(this.option)
				// 	})
				// }
			},
			selectAddress(type, item) {
				console.log(item);
				uni.setStorageSync('selectaddress', item);
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					});
				}, 100)
			},
			addAddress(type, item) {
				uni.navigateTo({
					url: `/pages/address2/addressManage?type=${type}&data=${JSON.stringify(item)}`
				})
			},
			delAddress(item) {
				uni.showModal({
					title: this.i18n.popup.tips,
					content: this.i18n.popup.confirm3,
					cancelText: this.i18n.popup.cancel,
					confirmText: this.i18n.popup.confirm,
					success: res => {
						if (res.confirm) {
							this.$http.post('user.payment.del', {
								payment_id: item.id
							}).then(res => {
								this.getUserPayment()
							})
						}
					}
				})
			},
			refreshList(data, type) {
				this.addressList.unshift(data);
			},
			switchChange(e, item) {
				console.log(e.detail.value)
				console.log(item.is_default)
				if (!item.is_default && e.detail.value) {
					let send = {
						id: item.id,
						is_default: 1
					}
					this.$http.post('user.payment.edit2', send).then(res => {
						this.$api.msg(this.i18n.popup.success);
						this.getUserPayment()
						// setTimeout(() => {
						// 	this.$api.prePage()
						// }, 800)
					})
				}

			},
		}
	}
</script>

<style lang='scss'>
	page {
		padding-bottom: 120upx;
	}

	.content {
		position: relative;
	}

	.list {
		display: flex;
		align-items: center;
		padding: 20upx 30upx;
		;
		/* background: #fff; */
		position: relative;
	}

	.wrapper {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.address-box {
		display: flex;
		align-items: center;

		.tag {
			font-size: 24upx;
			color: $base-color;
			margin-right: 10upx;
			background: #fffafb;
			border: 1px solid #ffb4c7;
			border-radius: 4upx;
			padding: 4upx 10upx;
			line-height: 1;
		}

		.address {
			font-size: $font-base;
			color: $font-color-dark;
			flex: 1;
		}
	}

	.u-box {
		font-size: 28upx;
		color: $font-color-light;
		margin-top: 16upx;

		.name {
			margin-right: 30upx;
		}
	}

	.iconshanchu1 {
		display: flex;
		align-items: center;
		height: 80upx;
		font-size: 40upx;
		color: $font-color-light;
		padding-left: 30upx;
	}

	.add-btn {
		// position: fixed;
		left: 30upx;
		right: 30upx;
		bottom: 16upx;
		z-index: 95;
		display: flex;
	}

	.del-btn {
		color: #fa436a;
	}
</style>